import React, { Children, CSSProperties, FC } from 'react'
import styled from "styled-components"
import * as echarts from 'echarts'
import { ECharts } from 'echarts'
import { IChartData ,IDateLineChart} from '@/types/echart'
import Title from '@/components/pages/titleTop'
import bg_verticle from '@/assert/images/customer/backFrame.png'
import { observer } from 'mobx-react'

const ChartPie = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
    padding:3rem;
    background-image: url(${props=>props.style?.backgroundImage?props.style?.backgroundImage:bg_verticle});
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .content{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      width: 95%;
      height: 95%;
    }

`
const getOption = (myChart: ECharts, pieParams: IDateLineChart) => {
  if (!pieParams.dataset) {
    return {};
  }
  return {
    title: {
      text: ' ',
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    toolbox: {
      feature: {
        // saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '25%',
      containLabel: true,
      textStyle: {
        color: '#fff',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        // data:  pieParams.datas.column,
        nameTextStyle: {
          color: '#fff',
          fontWeight: 'normal',
          fontFamily:'MicrosoftYaHei',
          fontSize: 14
        },
        axisLabel: {
          textStyle: {
            show: true,
            color: '#fff',
            fontFamily:'MicrosoftYaHei',
          }
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            show: true,
            color: '#fff'
          }
        },
        nameTextStyle: {
          color: '#fff',
          fontWeight: 'normal',
          fontSize: 14
        },
      }
    ],
    dataset:pieParams.dataset,

    series: [
      {
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        smooth:true,
        emphasis: {
          focus: 'series'
        },
      },
      {
        type: 'line',
        stack: 'Total',
        smooth:true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0,255,222,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(0,255,222,0.3)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
      },
    ]
  };
}


const Content: FC<IDateLineChart&{style?:CSSProperties}> = function (props) {
  let myEchart: ECharts;
  return (
    <ChartPie style={props.style}>
      <Title top="3rem" name={props.title!} />
      {props.children}
      <div className="content" ref={(ref) => {
        if (ref) {
          if (props.dataset) {
            myEchart = echarts.init(ref)
            myEchart.setOption(getOption(myEchart, props));
          }
        }

      }} />
    </ChartPie>
  )
}

export default observer(Content)
